<template>
    <el-table
            highlight-current-row
            v-loading="loading"
            :data="emps.filter(data => !search || data.name.toLowerCase().includes(search.toLowerCase()) || data.eid==search)"
            stripe
            style="width: 100%">
        <el-table-column
                label="管理员"
                width="100">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p>姓名: {{ scope.row.name }}</p>
                    <p>住址: {{ scope.row.address }}</p>
                    <p>入职日期: {{ scope.row.date }}</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium">{{ scope.row.name }}</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column
                prop="ephone"
                label="电话"
                width="210">
        </el-table-column>
        <el-table-column
                label="管理权限"
                width="180">
            <template slot-scope="scope">
                <el-popover trigger="hover" placement="top">
                    <p v-if="scope.row.power==3">普通管理员: 只能查看、修改订单信息、会员信息</p>
                    <p v-if="scope.row.power==2">高级管理员: 可以查看、修改订单信息和员工信息、车辆信息、会员信息</p>
                    <p v-if="scope.row.power==1">超级管理员: 神秘</p>
                    <div slot="reference" class="name-wrapper">
                        <el-tag size="medium" v-if="scope.row.power==3">普通管理员</el-tag>
                        <el-tag size="medium" v-if="scope.row.power==2">高级管理员</el-tag>
                        <el-tag size="medium" v-if="scope.row.power==1">超级管理员</el-tag>
                    </div>
                </el-popover>
            </template>
        </el-table-column>
        <el-table-column
                align="right">
            <template slot="header" slot-scope="scope">
                <el-input
                        v-model="search"
                        size="mini"
                        prefix-icon="el-icon-search"
                        placeholder="输入关键字搜索"/>
            </template>
            <template slot-scope="scope">
                <el-button
                        size="mini"
                        @click="handleEdit(scope.$index, scope.row)">修改权限</el-button>
            </template>
        </el-table-column>
        <!--修改权限 面板-->
        <el-drawer
                :append-to-body="true"
                :before-close="handleClose"
                :visible.sync="dialog"
                custom-class="demo-drawer"
                ref="drawer">
            <!-- :append-to-body="true" 解决全部黑屏，无法关闭抽屉的情况 -->
            <div class="demo-drawer__content" style="margin-top: -40px">
                <h3 style="text-align: center"><i class="el-icon-s-check"></i>修改 {{this.dialogEmp.name}} 权限</h3>
                <el-form :model="ruleForm"  :rules="rules" ref="ruleForm" label-width="130px" class="demo-ruleForm" size="medium">
                    <el-form-item prop="value">
                        <el-select placeholder="请选择" v-model="ruleForm.value">
                            <el-option
                                    v-for="item in power"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value">
                                <span style="float: left">{{ item.label }}</span>
                                <span style="float: right; color: #8492a6; font-size: 13px">{{ item.value }}</span>
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item style="margin-left: 22px">
                        <el-button type="primary" @click="Submit" :loading="loading">{{ loading ? '修改中 ...' : '确认修改' }}</el-button>
                        <el-button @click="cancelForm">取 消</el-button>
                    </el-form-item>
                </el-form>
            </div>
        </el-drawer>
    </el-table>
</template>

<script>
    export default {
        inject:['reload'],
        name:"EmpLock",
        data() {
            return {
                emps: [],
                loading:true,
                search:'',
                dialog: false,
                /*传递给面板的数据*/
                dialogEmp:{},
                /*面板下拉框的数据*/
                power: [{
                    value: '3',
                    label: '普通管理员'
                }, {
                    value: '2',
                    label: '高级管理员'
                }, {
                    value: '1',
                    label: '超级管理员'
                }],
                /*表单数据*/
                ruleForm: {
                    value: '',
                },
                rules: {
                    value: [
                        {required: true, message: '请选择目的地', trigger: 'change'}
                    ],
                },
                formLabelWidth: '80px',
                timer: null,
            }
        },
        methods:{
            handleEdit(index, row) {
                this.dialog = true;
                //传递当前行的数据给dialog
                this.dialogEmp=row;
            },
            handleDelete(index, row) {
                console.log(index, row);
            },
            handleClose(done) {
                done();
                //点击抽屉以外，直接回到列表页面
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            cancelForm() {
                //点击取消按钮
                this.loading = false;
                this.dialog = false;
                clearTimeout(this.timer);
            },
            Submit() {
                //点击修改按钮
                if (this.loading) {
                    return;
                }
                this.$refs['ruleForm'].validate((valid) => {
                    if (valid) {
                        this.loading = true;
                        this.timer = setTimeout(() => {
                            let powerAndId=new URLSearchParams();
                            let id=this.dialogEmp.eid;//管理员的id
                            let power=this.ruleForm.value;//管理员权限
                            powerAndId.append("eid",id);
                            powerAndId.append("power",power);

                            this.axios.post("/emp/updatePowerById",powerAndId) .then(res=>{
                                if (res.data==""){
                                    this.$message({
                                        message: "权限不足,请联系超级管理员",
                                        type: 'error'
                                    });
                                }else{
                                    this.$message({
                                        message: '修改权限成功',
                                        type: 'success'
                                    });
                                }
                                this.reload();
                            });
                            this.loading = false;
                        }, 500);
                    }else {
                        //表单验证失败
                        this.$message.error('请选择要修改的权限');
                        return false;
                    }
                });




            },


        },
        created(){
            let _this=this;
            _this.loading=true;
            this.axios.get("/emp/queryAll")
                .then(res=>{
                    //console.log(res.data[0]);

                    let emps=[];
                    for (let i = 0; i < res.data.length; i++) {
                        emps[i]={
                            eid: res.data[i].eid,
                            ephone: res.data[i].ephone,
                            date: res.data[i].hiredate,
                            name: res.data[i].ename,
                            address: res.data[i].eaddress,
                            sal: res.data[i].sal,
                            username: res.data[i].username,
                            password: res.data[i].password,
                            power: res.data[i].power,
                        };
                    }
                    this.emps=emps;
                    _this.loading=false;
                })

        }
    }
</script>
